#include("../layout.html")
#@layout("固定链接设置")

#define body()
<h1>固定链接设置</h1>

<div class="layui-fluid">
	<form class="layui-form" action="/admin/option/permalink" method="post">
		<p>WordPress让您能够为您的永久链接和存档建立自定义URL结构。自定义URL结构可以为您的链接提高美感、可用性和前向兼容性。这里有<a href="https://codex.wordpress.org/Using_Permalinks">一些可用的标签</a>，以及一些入门范例。</p>
		<h2 class="title">常用设置</h2>
		<div class="layui-form-item">
			<div class="layui-inline" style="width:200px;">
				<input type="radio" name="selection" value="" title="朴素" lay-filter="selection">
			</div>
			<div class="layui-inline">
				<code>http://localhost:8888/?p=123</code>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline" style="width:200px;">
				<input type="radio" name="selection" value="/%year%/%monthnum%/%day%/%postname%/" title="日期和名称型" lay-filter="selection">
			</div>
    		<div class="layui-inline">
				<code>http://localhost:8888/2019/03/22/sample-post/</code>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline" style="width:200px;">
				<input type="radio" name="selection" value="/%year%/%monthnum%/%postname%/" title="月份和名称型" lay-filter="selection">
			</div>
    		<div class="layui-inline">
				<code>http://localhost:8888/2019/03/sample-post/</code>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline" style="width:200px;">
				<input type="radio" name="selection" value="/archives/%post_id%" title="数字型" lay-filter="selection">
			</div>
    		<div class="layui-inline">
				<code>http://localhost:8888/archives/123</code>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline" style="width:200px;">
				<input type="radio" name="selection" value="/%postname%/" title="文章名" lay-filter="selection">
			</div>
    		<div class="layui-inline">
				<code>http://localhost:8888/sample-post/</code>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline" style="width:200px;">
				<input type="radio" name="selection" id="custom_selection" value="custom" title="自定义结构" lay-filter="selection">
			</div>
    		<div class="layui-inline">
				<code>http://localhost:8888</code>
			</div>
			<div class="layui-inline" style="width:400px;">
				<input type="text" name="permalink_structure" id="permalink_structure" value="#(permalink_structure??)" placeholder="" autocomplete="off" class="layui-input"> 
			</div>
			<div class="available-structure-tags">
				<p>可用标签：</p>
				<ul role="list">
					<li>
						<button type="button" class="layui-btn layui-btn-sm layui-btn-primary button-secondary" value="%year%">
							%year%								
						</button>
					</li>
					<li>
						<button type="button" class="layui-btn layui-btn-sm layui-btn-primary button-secondary" value="%monthnum%">
							%monthnum%								
						</button>
					</li>
					<li>
						<button type="button" class="layui-btn layui-btn-sm layui-btn-primary button-secondary" value="%day%">
							%day%								
						</button>
					</li>
					<li>
						<button type="button" class="layui-btn layui-btn-sm layui-btn-primary button-secondary" value="%hour%">
							%hour%								
						</button>
					</li>
					<li>
						<button type="button" class="layui-btn layui-btn-sm layui-btn-primary button-secondary" value="%minute%">
							%minute%								
						</button>
					</li>
					<li>
						<button type="button" class="layui-btn layui-btn-sm layui-btn-primary button-secondary" value="%second%">
							%second%								
						</button>
					</li>
					<li>
						<button type="button" class="layui-btn layui-btn-sm layui-btn-primary button-secondary" value="%post_id%">
							%post_id%								
						</button>
					</li>
					<li>
						<button type="button" class="layui-btn layui-btn-sm layui-btn-primary button-secondary" value="%postname%">
							%postname%								
						</button>
					</li>
					<li>
						<button type="button" class="layui-btn layui-btn-sm layui-btn-primary button-secondary" value="%category%">
							%category%								
						</button>
					</li>
					<li>
						<button type="button" class="layui-btn layui-btn-sm layui-btn-primary button-secondary" value="%author%">
							%author%
						</button>
					</li>
				</ul>
			</div>
		</div>
		
		<h2 class="title">可选</h2>
		<p>如果您喜欢，您可以在此给您的分类和标签自定义URL。比如，使用<code>topics</code>作为您的分类基础将会使您的分类链接变成<code>http://localhost:8888/topics/uncategorized/</code>。如果您留空此处，默认值将被使用。</p>
		<div class="layui-form-item">
    		<label class="layui-form-label">分类目录前缀</label>
    		<div class="layui-input-block" style="width:400px;">
    			<input type="text" name="category_base" id="category_base" value="#(category_base??)" placeholder="" autocomplete="off" class="layui-input">
   	 		</div>
    	</div>
    	<div class="layui-form-item">
    		<label class="layui-form-label">标签前缀</label>
    		<div class="layui-input-block" style="width:400px;">
    			<input type="text" name="tag_base" id="tag_base" value="#(tag_base??)" placeholder="" autocomplete="off" class="layui-input">
   	 		</div>
    	</div>
    	<div class="layui-form-item">
    		<button type="submit" lay-submit lay-filter="*" class="layui-btn layui-btn-sm">保存更改</button>
    	</div>
    </form>
</div>
#end

#define foot()
<script>
layui.cache.page = 'option';
layui.use('tbynet', function(){
	var $ = layui.$
	,form = layui.form
	,tbynet = layui.tbynet;
	
	var selectionChecked = false;
	$('input[name=selection]').each(function(i, e){
	    if($(e).val() == $('#permalink_structure').val()) {
			$(e).prop('checked', true);
			selectionChecked = true;
	    } else {
	    	$(e).prop('checked', false); 
	    }
	});
	if(false == selectionChecked) {
		$( '#custom_selection' ).prop( 'checked', true );
	}
	
	form.on('radio(selection)', function(data){
		if("custom_selection" != $(data.elem).attr("id")) {
			$('#permalink_structure').val(data.value);
		}
		active();
	});
	$( 'input[name="custom_selection"]' ).on( 'click input', function() {
		$( '#custom_selection' ).prop( 'checked', true );
		form.render();
	});
	
	function active() {
		$('.button-secondary').removeClass('active');
		$.each($('#permalink_structure').val().split('/').filter(s => $.trim(s).length > 0), function(i, e){
			$('button[value="'+ e +'"]').addClass('active');
		});
	}
	active();
	
	$('body').on('click', '.button-secondary', function(){
		var permalink = $('#permalink_structure').val();
		
		var permalinks = permalink.split('/').filter(s => $.trim(s).length > 0);
		
		var text = $(this).val();
		
		var index = $.inArray(text, permalinks);
		
		if($(this).hasClass('active')) {
			$(this).removeClass('active');
			permalinks.splice(index, 1);
		} else {
			$(this).addClass('active');
			permalinks.push(text);
		}
		
		if(0 == permalinks.length) {
			$('#permalink_structure').val('');
		} else {
			$('#permalink_structure').val('/' + permalinks.join('/') + '/');
		}
		
		$( '#custom_selection' ).prop( 'checked', true );
		
		form.render();
	});
	
	form.render();
});
</script>
#end